<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="添加客户"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="选择客户：" required v-model="khname"  is-link @click="goSelectCustomer"/>

    <van-cell title="联系电话：" required v-model="telephone" />

    <van-field
      v-model="address"
      required
      label="收货地址："
      placeholder="请输入收货地址"
    />

    <van-field
      v-model="xjje"
      required
      label="箱价(元)："
      placeholder="请输入每箱价格"
      type="digit"
    />

    <van-cell-group inset v-for="item in productList" :key="item.index">
      <!-- 输入任意文本 -->
      <van-field v-model="item.dgsl" :label="item.name + '(箱)：'" label-width="40%" required type="digit" @input="onChangeDgsl(item)"/>

    </van-cell-group>

    <van-cell title="合计(箱)：" required v-model="zsl" />

    <van-cell title="承担运费：" title-style="width:20%;" required>
      <van-radio-group v-model="cdyfbz" direction="horizontal" @change="onChangeCdyfbz">
        <van-radio name="1">客户承担</van-radio>
        <van-radio name="2" style="margin-top: 10px;">公司承担</van-radio>
      </van-radio-group>
    </van-cell>

    <van-field
      v-model="zxzc"
      label="执行政策："
      placeholder="请输入执行政策"
    />

    <van-field
      v-model="bz"
      label="备注："
      placeholder="请输入备注"
      type="textarea"
    />

    <div  class="btn" >
      <van-button type="info" size="large" round @click="doSubmit" >提交</van-button>
    </div>

  </div>
</template>
<script>
import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'
import { addCost, queryUserInfo, updateCost, addCustomer, updateCustomer, queryProductList, addFhnotes } from '../../api/api'
import eventBus from '../../utils/eventbus'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'

export default {
  name: 'AddOrder',
  data() {
    return {
      khname: '请选择客户',
      custid: '',
      productList: [],
      telephone: '',
      address: '',
      zsl: '0',
      xjje: '',
      cdyfbz: '1',
      zxzc: '',
      bz: ''

    }
  },

  created() {
    console.log('执行了created')
    this.queryProductList()
  },

  mounted() {
    console.log('执行了mounted')
  },

  activated() {
    console.log('执行了activated')
    // 根据key名获取传递回来的参数，data就是map
    eventBus.$on('customerInfo', function(data) {
      this.custid = data.custid
      this.khname = data.name
      this.telephone = data.telephone
      this.xjje = ''
      this.address = ''
      this.queryProductList()
      this.zxzc = ''
      this.bz = ''
      this.zsl = 0
      console.log('客户：', data)
      // this.$destroy(true)
    }.bind(this))
  },

  methods: {

    onChangeDgsl(item) {
      let zsl = 0
      const productList = this.productList
      for (var i = 0; i < productList.length; i++) {
      /*  if(!productList[i].dgsl ){
          productList[i].dgsl = 0
        }*/
        zsl = floatAdd(zsl, parseFloat(productList[i].dgsl))
      }

      this.zsl = zsl
    },

    onChangeCdyfbz(e) {
      this.cdyfbz = e
    },

    queryProductList() {
      const param = {}
      queryProductList(param).then(response => {
        if (response.code === 200) {
          this.productList = response.rows
          for (var i = 0; i < this.productList.length; i++) {
            this.productList[i].index = i
          }
          console.log(this.productList)
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    goSelectCustomer() {
      this.$router.push({ path: '/customerList', query: {}})
    },

    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          this.ywyname = response.data.name
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doSubmit() {
      if (!this.custid) {
        Toast.fail('请选择客户')
        return
      }

      if (!this.address) {
        Toast.fail('请填写收货地址')
        return
      }

      if (!this.xjje) {
        Toast.fail('请填写箱价')
        return
      }

      if (this.zsl == 0) {
        Toast.fail('请填写订货数量')
        return
      }

      const productList = this.productList
      const list = []
      debugger
      for (var i = 0; i < productList.length; i++) {
        list.push({ productId: productList[i].productId, dhsl: productList[i].dgsl, productname: productList[i].name })
      }
      const param = { custid: this.custid, address: this.address, ddsl: this.zsl, list: list, telephone: this.telephone, xjje: this.xjje, cdyfbz: this.cdyfbz, zxzc: this.zxzc, bz: this.bz }
      console.log(param)
      addFhnotes(param).then(response => {
        debugger
        if (response.code === 200) {
          const noteid = response.data.noteid
          this.$router.push({ path: '/success', query: { noteid: noteid, xdbz: '1' }})
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    showKhjb() {
      this.jbShow = true
    },

    showKhzt() {
      this.khztShow = true
    },

    onSelectKhjb(item) {
      this.khjbname = item.name
      this.khjb = item.id
      this.jbShow = false
    },

    onSelectKhzt(item) {
      this.khztname = item.name
      this.khzt = item.id
      this.khztShow = false
    }
  }
}
</script>
<style lang="scss" scoped>

.container{
  width: 100%;
  height: calc(100vh);
  background-color: white;
}

.navclass{
  background-color:#f8f8f8;
}

.btn{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  background-color: white;
  padding-bottom: 150px;
}

#allmap{
  height:200px;
}

.amap-demo {
  height: 200px;
}

</style>
